<template>
  <!-- 标的要素 -->
  <div>
    <div class="flex items-center justify-between mt-[30px] mb-[20px]">
      <div class="flex items-center">
        <div class="w-[4px] h-[12px] bg-[#EF6800]"></div>
        <div class="ml-[10px] text-[#EF6800] font-bold" style="font-size: 16px">
          标的要素
        </div>
      </div>
    </div>
    <el-form-item label="工程类别 " prop="name">
      <el-input
        :disabled="true"
        style="width: 318px"
        class="w-[318px]"
        v-model="Info.classify"
      ></el-input>
    </el-form-item>
    <el-form-item label="项目名称" prop="name">
      <el-input
        :disabled="disabled"
        placeholder="请输入项目名称"
        style="width: 580px"
        class="w-[318px]"
        v-model="Info.name"
      ></el-input>
    </el-form-item>
    <!-- <el-form-item label="项目编号" prop="name">
      <el-input
        :disabled="disabled"
        placeholder="请输入项目编号"
        style="width: 318px"
        class="w-[318px]"
        v-model="Info.code"
      ></el-input>
    </el-form-item> -->
    <el-form-item label="工地地址 " prop="name">
      <el-input
        :disabled="disabled"
        placeholder="请输入XX省XX市XX区XX路XX某商场"
        style="width: 580px"
        class="mr-[5px]"
        v-model="Info.address"
      ></el-input>
      -
      <el-input
        :disabled="disabled"
        placeholder="请输入铺位号、具体点位或店铺名称"
        style="width: 318px"
        class="w-[318px] ml-[5px]"
        v-model="Info.room_no"
      ></el-input>
      <!-- <span class="text-red-500 ml-[10px]">铺位号或具体点位</span> -->
    </el-form-item>
    <el-form-item label="人员人数 " prop="name">
      <el-input
        :disabled="disabled"
        placeholder="请输入人员人数"
        style="width: 318px"
        class="w-[318px]"
        v-model="Info.num"
      ></el-input>
      <span class="ml-[20px] text-red-500">不超过50人</span>
    </el-form-item>
    <el-form-item label="工期" prop="name">
      <el-input
        :disabled="disabled"
        placeholder="请输入工期"
        style="width: 318px"
        class="w-[318px]"
        @input="inputChange"
        v-model="Info.age"
      ></el-input>
    </el-form-item>
    <!-- <el-form-item label="开始时间 " prop="name">
      <el-date-picker
        :disabled="disabled"
        :disabled-date="disabledDate1"
        v-model="Info.start_date"
        type="date"
        placeholder="请选择开始时间"
        style="width: 318px"
        class="w-[318px]"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        @change="pickerChanges($event, 1)"
      />
    </el-form-item> -->
    <!-- <el-form-item label="结束时间 " prop="name">
      <el-date-picker
        :disabled="disabled"
        v-model="Info.end_date"
        placeholder="请选择结束时间"
        type="date"
        style="width: 318px"
        class="w-[318px]"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        @change="pickerChanges($event, 2)"
      />
    </el-form-item> -->

    <!-- <el-form-item label="方案" prop="name">
      <el-select v-model="Info.fanan">
        <el-option
          v-for="item in fananList"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
    </el-form-item> -->
    <!-- <el-form-item label="房屋建筑结构" prop="name" v-if="route.query.id != 1">
      <el-input
        placeholder="请选择房屋建筑结构"
        v-model="Info.structure"
        style="width: 318px"
        class="w-[318px]"
      ></el-input>
    </el-form-item> -->

    <!-- <div class="flex" v-if="route.query.id != 1">
      <el-form-item label="施工面积" prop="name">
        <el-input
          placeholder="请输入施工面积"
          v-model="Info.area_num"
          style="width: 318px"
          class="w-[318px]"
        ></el-input>
      </el-form-item>
      <span class="text-[#F00505] ml-[10px] text-[15px] mt-[5px]"
        >注：本产品规定施工面积不得超过2000平米。仅承保位于购物中心或写字楼等现代化钢筋混凝土建筑物内部的装修项目。</span
      >
    </div> -->

    <!--   <el-form-item label="项目所在地" prop="name" v-if="route.query.id != 1">
      <div class="flex">
        <div>
          <el-select v-model="Info.province" @change="handleProvinceSelect">
            <el-option
              v-for="item in regionData"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
          <span class="ml-[5px]">省/直辖市</span>
        </div>
       
        <div class="ml-[60px]">
          <el-select
            v-model="Info.city"
            :disabled="!Info.province || cityList!.length == 0"
            @change="handleCitySelect"
          >
            <el-option
              v-for="item in cityList"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
          <span class="ml-[5px]">市</span>
        </div>
        <div class="ml-[60px]">
          <el-select
            v-model="Info.area"
            :disabled="
              !Info!.province || !Info!.city || areaList!.length == 0
            "
            @change="handleAreaSelect"
          >
            <el-option
              v-for="item in areaList"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span class="ml-[5px]">区</span>
        </div>
      </div>
    </el-form-item> -->

    <!-- <el-form-item label="施工详细地址" prop="name">
      <el-select v-model="Info.address" @change="seleceChange">
        <el-option
          v-for="item in arrressList"
          :label="item.address"
          :value="item"
        />
      </el-select>

  
    </el-form-item> -->

    <!-- <el-form-item label="商铺号/房间号" prop="name">
      <el-input
        placeholder="请输入商铺号/房间号"
        style="width: 318px"
        v-model="Info.room_no"
        class="w-[318px]"
      ></el-input>
    </el-form-item> -->
    <!-- <el-form-item label="职业类别" prop="name" v-if="route.query.id == 1">
      <el-select v-model="Info.address">
        <el-option
          v-for="item in arrressList"
          :label="item.address"
          :value="item"
        />
      </el-select>
    </el-form-item> -->
  </div>
</template>
<script setup lang="ts">
import {
  defineProps,
  PropType,
  defineExpose,
  defineEmits,
  reactive,
  ref,
  watchEffect,
  computed,
  ComputedRef,
} from "vue";
// import { codeToText } from "element-china-area-data";
import { homeGetAddress } from "@/utils/api";
// import { regionData } from "element-china-area-data";
import { useRoute } from "vue-router";
const props = defineProps({
  treetop: { type: Object }, //数据回显
  fananList: { type: Array },
  disabled: { type: Boolean, default: false },
});
// interface CityList {
//   label: string;
//   value: string;
// }
interface infoType {
  name: string;
  address: string;
  age: string;
  code: string;
  start_date: string;
  end_date: string;
  classify: string;
  num: string;
  room_no: string;
}
const Info = reactive<infoType>({
  name: "",
  address: "",
  age: "",
  code: "",
  start_date: "",
  end_date: "",
  classify: "室内装修",
  num: "",
  room_no: "",
});
const route = useRoute();
const arrressList = ref([] as any[]);
const fananList = ref([] as any[]);
const emit = defineEmits(["pickerChange", "inputChange"]);
// interface AreaList {
//   label: string;
//   value: string;
// }
// interface RegionData {
//   label: string;
//   value: string;
// }
//禁用开始时间
const disabledDate1 = (time: Date) => {
  // 1是开始时间 2是结束时间
  return time.getTime() < Date.now();
  // console.log(time);

  //return false;
};
const inputChange = (v: any) => {
  let start = new Date(Info.start_date).getTime();
  // let end = new Date(Info.end_date).getTime();
  let end = start + 1000 * 60 * 60 * 24 * (v - 1);
  Info.end_date = setDate(end);
  emit("inputChange", end, v);
};
//根据时间戳转年月日
const setDate = (value: number) => {
  let date = new Date(value);
  let y: any;
  let m: any;
  let d: any;
  y = date.getFullYear();
  m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  d = date.getDate();
  d = d < 10 ? "0" + d : d;
  let dates = y + "-" + m + "-" + d;

  return dates;
};
watchEffect(() => {
  if (props.treetop) {
    let key: keyof infoType;
    for (key in Info) {
      if (props.treetop[key]) {
        Info[key] = props.treetop[key];
      }
    }
    Info.classify = "室内装修";
    // console.log(Info);
  }
  if (props.fananList) {
    fananList.value = props.fananList;
  }
});
const getData = async () => {
  const res = await homeGetAddress("");
  // console.log(res);
  arrressList.value = res.msg;
};
getData();
//选择时间
const pickerChanges = (v: any, index: number) => {
  //1是开始时间 2是结束时间
  var timestr = v.replace(/-/g, "/");
  var timestamp = new Date(timestr).getTime();
  emit("pickerChange", timestamp, index);

};

defineExpose({
  //   handleProvinceSelect,
  Info,
});
</script>
